<template>
  <a-modal
    :confirmLoading="loading"
    :visible="visible"
    okText="选择"
    title="选择产品"
    width="70%"
    @cancel="react"
    @ok="handleChoose"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <!-- <a-col :md="4" :sm="24">
            <materialType-select v-model="queryParam.MaterialTypeId"></materialType-select>
          </a-col> -->
          <a-col :md="4" :sm="24">
            <a-form-item label="查询类别">
              <a-select v-model="queryParam.condition">
                <a-select-option key="cInvCode">产品编码</a-select-option>
                <a-select-option key="cInvName">产品名称</a-select-option>

                <!-- <a-select-option key="cInvStd">规格型号</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model.trim="queryParam.keyword" placeholder="关键字"/>
            </a-form-item>
          </a-col>

          <!-- <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.ProductCode" placeholder="成品编码" />
            </a-form-item>
          </a-col> -->
          <!-- <a-col :md="6" :sm="24">
            <a-form-item>
              <a-input v-model="queryParam.ContactName" placeholder="客户\供应商名称或编码" />
            </a-form-item>
          </a-col> -->
          <!-- <a-col :md="4" :sm="24">
            <a-select placeholder="选择排序" @change="handleChange($event)">
              <a-select-option value="cInvCode">编码</a-select-option>
              <a-select-option value="cInvName">
                名称
              </a-select-option>
            </a-select>
          </a-col> -->
          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList(true)
                }
              "
            >查询
            </a-button
            >
            <a-button
              style="margin-left: 8px"
              @click="
                () => {
                  this.queryParam = { IsProduct: true, condition: 'cInvName' }
                  this.sorter = {}
                  this.pagination.current = 1
                }
              "
            >重置
            </a-button
            >
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      :bordered="true"
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      :pagination="pagination"
      :rowKey="(row, index) => row.cInvCode"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        type: type,
        getCheckboxProps: CheckboxProps
      }"
      :scroll="{ y: scroll }"
      size="small"
      @change="handleTableChange"
    >
      <template slot="ExpirationDate" slot-scope="text, record, index">
        <span>{{ text.substring(0, 10) }}</span>
      </template>

      <template slot="dataIndex" slot-scope="text, record, index">
        <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
      </template>
    </a-table
    >
  </a-modal>
</template>

<script>
const columns = [
  // { title: '备注', dataIndex: 'Remark', width: '10%' },
  { title: '产品编码', dataIndex: 'cInvCode' },
  { title: '产品名称', dataIndex: 'cInvName' },
  { title: '规格型号', dataIndex: 'cInvStd' }
  // { title: '规格型号 ', dataIndex: 'cInvStd' },
  // { title: '零售单价 ', dataIndex: 'iInvSaleCost' },
  // { title: '采购员', dataIndex: 'cPurPersonCode' },

  // { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' } }
]
export default {
  props: {
    type: { type: String, default: 'checkbox', required: false },
    id: { type: String, required: false }
  },
  components: {
    // MaterialTypeSelect
  },

  computed: {
    scroll () {
      return Number(document.documentElement.clientHeight) * 0.5
    }
  },
  data () {
    return {
      data: [],
      ListCode: [],
      qid: '',
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      filters: {},
      sorter: { field: 'cInvCode', order: 'desc' },
      loading: false,
      columns,
      queryParam: { condition: 'cInvName' },
      //IsProduct: true
      selectedRowKeys: [],
      selectedRows: [],
      visible: false
    }
  },
  methods: {
    CheckboxProps (record) {
      let a = this.ListCode.map(item => {
        return item.cInvCode
      })
      var b = record.cInvCode
      var cSOCode = a.includes(b)
      return {
        props: {
          disabled: cSOCode
        }
      }
    },
    // 排序
    handleChange (value) {
      if (value === 'cInvName') this.sorter.field = 'cInvName'
      if (value === 'cInvCode') this.sorter.field = 'cInvCode'
      this.getDataList(true)
    },
    genTreeNode (parentId, isLeaf = false) {
      const random = Math.random()
        .toString(36)
        .substring(2, 6)
      return {
        id: random,
        pId: parentId,
        value: random,
        title: isLeaf ? 'Tree Node' : 'Expand to load',
        isLeaf
      }
    },
    react () {
      this.visible = false
      this.queryParam = { IsProduct: true, condition: 'cInvName' }
      this.pagination.current = 1
      this.pagination.pageSize = 25
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList(true)
    },
    getDataList (isSelect) {
      if (isSelect) {
        if (!this.queryParam.keyword || this.queryParam.keyword === undefined || this.queryParam.keyword === '') {
          this.$message.error('请输入查询条件！')
          return
        }
      }
      this.loading = true
      this.$http
        .post('/ProductManagement/Inventory/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    openChoose (id, row, load) {
      this.selectedRowKeys = []
      this.data = []
      this.queryParam = { condition: 'cInvName', keyword: '' }
      this.qid = id
      this.ListCode = row
      this.visible = true
      if (load) return
    },
    handleChoose () {
      this.visible = false
      this.$emit('onChoose', this.selectedRows)
      this.queryParam = { condition: 'cInvName' }
      this.getDataList(true)
      this.pagination.current = 1
      this.pagination.pageSize = 25
    }
  }
}
</script>
